<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
</head>

<body>

    <div id="graph"></div>
    <script src="js/g6.js"></script>
    <script>
        window.onload = function () {
            const data = {
                nodes: [
                    {
                        id: '1',
                        label: 'node 1',
                    },
                    {
                        id: '2',
                        label: 'node 2',
                    },
                    {
                        id: '3',
                        label: 'node 3',
                    },
                    {
                        id: '4',
                        label: 'node 4',
                    },
                ],
                edges: [
                    {
                        source: '1',
                        target: '2',
                    },
                    {
                        source: '1',
                        target: '3',
                    },
                    {
                        source: '2',
                        target: '4',
                    },
                    {
                        source: '3',
                        target: '4',
                    },
                ],
            };

            const graph = new G6.Graph({
                /* 画布容器 */
                container: 'graph',
                // 画布宽高
                width: window.innerWidth,
                height: window.innerHeight - 40,
                fitView: true,
                fitViewPadding: [50],
                layout: {
                    type: 'dagre',
                },
                defaultNode: {
                    type: 'circle',
                    style: {
                        r: 30
                    }
                },
                // 默认边集
                defaultEdge: {
                    type: 'line'
                },
                modes:{
                    // 缩放画布,拖拽节点，拖拽画布，选择节点
                    default:['zoom-canvas','drag-node','drag-canvas','brush-select']
                },
                // 需要搭配事件绑定起作用
                nodeStateStyles:{
                    // 鼠标悬停 hover状态启用
                    hover:{
                        fill: 'lightsteelblue',
                    },
                    // 鼠标点击 click状态启用
                    click:{
                        stroke: 'steelblue',
                        lineWidth: 3
                    }
                }
            });

            //读取数据
            graph.read(data);

            // g6绑定事件
            // graph.on('元素:事件名',e => {});
            graph.on('canvas:click',e => {
                // 查找所有绑定了点击的节点
                const nodes = graph.findAllByState('node','click');
                // 循环取消点击状态的样式
                nodes.forEach(node => {
                    graph.setItemState(node,'click',false);
                });

                console.log('canvas:click:',e);
            });

            graph.on('node:click',e => {
                // 点击状态启用
                graph.setItemState(e.item,'click',true);
                console.log('node:click:',e);
            });

            graph.on('node:mouseover',e => {
                // 悬停状态启用
                graph.setItemState(e.item,'hover',true);
                console.log('node:mouseover:',e);
            });

            // 通过鼠标移出事件取消点击和悬停状态样式
            // graph.on('node:mouseout',e => {
            //     // 点击状态和悬停启用
            //     graph.setItemState(e.item,'hover',false);
            //     graph.setItemState(e.item,'click',false);
            //     console.log('node:mouseout:',e);
            // });
        }
    </script>
</body>

</html>